<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://hmrz.wo.cn/sdk-deliver/js/verify_mobile_sdk-2.0.2.js"></script>
    <script src="./moment.js"></script>
    <script src="./sha256.js"></script>
    <title>Document</title>
    <style>
        #sdkContainer>#xw-authorize>.xw-title-line>.xw-back-icon {
            margin-top: 0.145rem;
            margin-left: 0.2rem;
            width: 0.15rem;
            height: 0.15rem;
        }

        #sdkContainer>#xw-authorize>.xw-content {
            top: 35%;
        }


        #sdkContainer>#xw-authorize>.xw-content>.xw-image-container {
            width: 1.8rem;
            height: 0.52rem;
            margin: 0 auto 0.55rem auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #sdkContainer>#xw-authorize>.xw-content>.xw-image-container>.xw-logo {
            width: 1.8rem;
            height: 0.52rem;
        }

        #sdkContainer>#xw-authorize>.xw-content>.xw-btn-container {
            background: #4A79FF;
            color: #fff;
            width: 3.25rem;
            height: 0.43rem;
            line-height: 0.47rem;
            border-radius: 3px;
            font-size: 0.16rem;

        }

        #sdkContainer>#xw-authorize>.xw-content>.xw-mobile {
            justify-content: center;
            letter-spacing: 0.05rem;
            font-size: 0.24rem;
            font-weight: 300;
            color: #333333;
            margin: 0 auto 0.63rem auto;
        }

        #sdkContainer>#xw-authorize>.xw-content>.xw-mobile>.xw-input-container {
            width: auto;
        }

        #sdkContainer>#xw-authorize>.xw-content>.xw-mobile>.xw-input-container>.xw-mobile-number-input {
            font-weight: 300;
            font-size: 0.24rem;
            color: #4A79FF;
            margin-right: .05rem;
            width: .15rem;
        }


        #sdkContainer>#xw-authorize>.xw-user-defined {
            top: 60%;
        }

        #sdkContainer>#xw-authorize>.xw-user-defined>.login {
            padding: 0 1.16rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.12rem;
            color: #333333;
        }

        #sdkContainer>#xw-authorize>.xw-user-defined>.login>.login_item {
            display: flex;
            flex-direction: column;
        }

        #sdkContainer>#xw-authorize>.xw-user-defined>.login>.login_item>img {
            height: 0.45rem;
            width: 0.45rem;
            border-radius: 50%;
            margin-bottom: 0.1rem
        }
    </style>
</head>

<body>

    <div id="sdkContainer"> </div>

</body>
<script>
    let fn = (doc, win) => {
        let docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                let clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = (clientWidth / 375) * 100 + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }
    fn(document, window);
    let params = {
        "clientSecret": "bnghJ09MqEdKSKB7",
        "clientId": "114257635",
        "packageName": "https://mail.wo.cn/coremail/hxphone",
        "clientType": "H5"
    };
    let reqTimeStamp = moment().format('YYYYMMDDHHmmssS')
    let authorization = sha256(`$${params.clientSecret}$${params.clientId}$${reqTimeStamp}$${params.packageName}$${params.clientSecret}$`);
    window.onload = window.JWuSDK.initWithAuth({
        "reqTimeStamp": reqTimeStamp,
        "clientId": "114257635",
        "authorization": authorization,
    }).then((response) => {
        loginWithInput()
    }).catch((err) => {
        alert(JSON.stringify(err))
    });

    function verifyMobile() {
        window.JWuSDK.verifyMobile(
            {
                "timeout": 10000
            }
        ).then((response) => {
            console.log(response);
            // 处理response
        }).catch((err) => {
            console.log(err);
            // 处理error情况
        });
    }
    function loginWithInput() {
        window.JWuSDK.loginWithInput(
            {
                "callback": function (data) {
                    // alert(JSON.stringify(data));
                },
                "watch": function (status, data) {
                    // alert(status, JSON.stringify(data));
                },
                "mount": 'sdkContainer',
                "navText": ' ',
                "navBackImg": '',
                "logoImg": ``,
                "loginBtnText": '一键登录',
                "appPrivacyOne": ['用户协议', 'https://op.mail.wo.cn/app/help/userAgreement.html'],
                "appPrivacyTwo": ['隐私备份', 'https://op.mail.wo.cn/app/help/privacyAgreement.html'],
                "appPrivacyTemplate": '已经阅读并同意沃邮箱:privacyOne和:privacyTwo',
                "appPrivacyWithBookMark": true,
                "enableHintToast": false,
                "enableSlideVerification": false,
                "defaultCheckBoxState": 1,
                "timeout": 10000,
                "userDefined": true,
                "userDefinedNode": {
                    "element": ` <div class="login">
                                    <div class="mailbox login_item">
                                        <img src="" alt="">
                                        <span>邮箱账密</span>
                                    </div>
                                    <div class="sms login_item">
                                        <img src="" alt="">
                                        <span>短信验证</span>
                                    </div>
                                </div>`,
                    "style": "自定义样式/可写在自己的HTML文件里",
                    "js": "自定义交互/也可以写在自己的JS文件中，不过要引入到当前页面文件"
                }
            }
        );
    }
</script>

</html>